<template>
	<view>
		<!-- main顶部 -->
		<view class="main-top">
			<!-- 导航 -->
			<view class="top" :style="{height:statusBarHeight+'px',width:windowWidth+'px'}"></view>
			<view class="box-bg" :style="{height:navbarHeight+'px'}">
				<text style="color: #4F4F4F;font-size: 36rpx;">我的</text>
			</view>

			<!-- 基本信息 -->
			<view class="lb-user">
				<view class="user-left">
					<u-avatar :src="getImgUrl(user_info.avatar || '')" size="120rpx"></u-avatar>
				</view>
				<view class="user-right">
					<view class="user-info" v-if="isAuth">
						<view class="name">
							<view class="text">
								<text v-if="user_info.nickname">{{user_info.nickname}}</text>
								<text v-else @click="goTo('/pages/users/my-profile/my-profile')">完善资料</text>
							</view>
							<view class="set" @click="goTo('/pages/users/my-profile/my-profile')">
								<img src="/static/my/set.png" alt="">
							</view>
						</view>
						<view class="tel-id">
							<view class="box" v-if="isMobile">
								<image src="/static/my/mobile.png"></image>
								<text>{{user_info.phone || ''}}</text>
							</view>
							<view class="box">
								<image src="/static/my/id.png"></image>
								<text>{{user_info.id_number || ''}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="no-login" v-else>
						<text>立即登录</text>
					</view> -->
				</view>
			</view>

			<!-- vip -->
			<view class="lb-vip">
				<image src="/static/my/vip-bg.png"></image>
				<image src="/static/my/vip.png"></image>
				<view class="vip-left">
					<view class="vip-label">
						VIP会员
					</view>
					<view class="vip-time" v-if="user_info.vip_expire_time">
						I {{fmtFormat(user_info.vip_expire_time)}}到期
					</view>
				</view>
				<view class="vip-right" @click="goTo('/pages/vip-center/vip-center')">
					<text v-if="user_info.is_vip == 1">续费</text>
					<text v-else>开通</text>
				</view>
			</view>
		</view>

		<!-- main -->
		<view class="user-main">
			<!--  -->
			<view class="lb-grid-5">
				<view class="grid-item" v-for="(item,index) in data1" :key="index" @click="goTo(item.url)">
					<view class="item-icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 团购验券 -->
			<view class="lb-title">
				团购验券
			</view>
			<view class="lb-grid-5">
				<view class="grid-item" v-for="(item,index) in data2" :key="index" @click="goTo(item.url)">
					<view class="item-icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 订单中心 -->
			<view class="lb-title">
				订单中心
			</view>
			<view class="lb-grid-5">
				<view class="grid-item" v-for="(item,index) in data3" :key="index" @click="goTo(item.url)">
					<view class="item-icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 分销中心 -->
			<view class="lb-title">
				超级集采
			</view>
			<view class="lb-grid-5">
				<view class="grid-item" v-for="(item,index) in data4" :key="index" @click="goToS(item.url)">
					<view class="item-icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 城市合伙人 -->
			<view class="lb-title">
				城市合伙人
			</view>
			<view class="lb-grid-5" style="">
				<view class="grid-item" v-for="(item,index) in data5" :key="index" @click="goTo(item.url)">
					<view class="item-icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 服务中心 -->
			<view class="lb-title">
				服务中心
			</view>
			<view class="lb-grid-5">
				<button :open-type="item.type == 1?'contact':''" class="grid-item" v-for="(item,index) in data6"
					:key="index" @click="goToType(item)">
					<view class="item-icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</button>
			</view>
		</view>
		<tabbar :numb="3"></tabbar>
		<!-- 登录 -->
		<loginPop></loginPop>
		<tipPop></tipPop>
	</view>
</template>

<script>
	import {
		setImgUrl,
		fmtFormat,
	} from "@/utils/comm.js"
	import tabbar from '@/components/tabbar.vue'
	import {
		mineApiInfo
	} from "@/api/apis/wash.js"
	import {
		getContactApi,
		getSysCategory
	} from "@/api/apis/comm.js"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				// 设置状态栏默认值高度为20
				statusBarHeight: 20,
				// 设置导航栏的默认值为45
				navbarHeight: 45,
				// 设置手机宽度默认值为375
				windowWidth: 375,
				statusBarAndNavbarHeight: 65,
				data1: [{
					name: '待收货',
					icon: '/static/my/0.png',
					url: '/pages/xi-hu/order-list/order-list?current=2'
				}, {
					name: '待评价',
					icon: '/static/my/1.png',
					url: '/pages/xi-hu/order-list/order-list?current=4'
				}, {
					name: '推广',
					icon: '/static/my/2.png',
					url: '/pages/xi-hu/promotion/promotion'
				}, {
					name: '卡包',
					icon: '/static/my/3.png',
					url: '/pages/users/coupon/coupon'
				}, {
					name: '钱包',
					icon: '/static/my/4.png',
					url: '/pages/users/my-balance/my-balance'
				}],
				data2: [{
					name: '抖音验卷',
					icon: '/static/my/10.png',
					url: '/pages/xi-hu/tiktok-verification/tiktok-verification'
				}, {
					name: '美团验卷',
					icon: '/static/my/11.png',
					url: '/pages/xi-hu/meituan-verification/meituan-verification'
				}],
				data3: [

				],
				data4: [{
					name: '分销中心',
					icon: '/static/my/30.png',
					url: '/pages/retail/home/home'
				}, {
					name: '渠道中心',
					icon: '/static/my/30.png',
					url: '/pages/channel/home/home'
				}, ],
				data5: [{
					name: '城市合伙人',
					icon: '/static/my/40.png',
					url: '/pages/users/city-partner/city-partner'
				}],
				data6: [{
					name: '我的消息',
					icon: '/static/my/50.png',
					url: '/pages/users/my-message/my-message',
					type: 0
				}, {
					name: '收货地址',
					icon: '/static/icon/map-1.png',
					url: '/pages/users/my-address/my-address',
					type: 0
				}, {
					name: '隐私协议',
					icon: '/static/my/51.png',
					url: '/pages/users/agreement/agreement',
					type: 0
				}, {
					name: '在线客服',
					icon: '/static/my/52.png',
					url: '',
					type: 1
				}, {
					name: '联系我们',
					icon: '/static/my/53.png',
					url: '',
					type: 2
				}],
			}
		},
		methods: {
			getMenu() {
				getSysCategory().then(res => {
					this.data3 = res.data.map(item => {
						return {
							name: item.order_name,
							icon: setImgUrl(item.order_image),
							url: item.order_url
						}
					})
				})
			},
			fmtFormat(time) {
				return time ? fmtFormat(time * 1000, 'yyyy-MM-dd') : '';
			},
			goToType(item) {
				if (item.type == 2) {
					this.goPhoneBtn();
				} else if (item.type == 0 && item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			//打电话
			goPhoneBtn() {
				getContactApi().then(res => {
					if (res.code == 1) {
						let val = res.data.value;
						uni.makePhoneCall({
							// 手机号
							phoneNumber: val,
							// 成功回调
							success: (res) => {
								// console.log(res)
							},
							// 失败回调
							fail: (res) => {
								// console.log(res)
							}
						});
					}
				})
			},
			//跳转
			goTo(url) {
				//判断当定手机号
				if (!this.isMobile) {
					this.$u.vuex('mobilePop', true);
					if (url == '/pages/users/my-profile/my-profile') {
						uni.setStorageSync('myProfile', true);
					}
					return;
				} else if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.$u.vuex('tipPop', true)
					return;
				}
			},
			//跳转
			goToS(url) {
				//判断当定手机号
				if (!this.isMobile) {
					this.$u.vuex('mobilePop', true);
					if (url == '/pages/users/my-profile/my-profile') {
						uni.setStorageSync('myProfile', true);
					}
					return;
				} else if (this.user_info.is_fenxiao != 1) {
					this.$u.toast('您还未申请合伙人，请前往城市合伙人申请!');
					return;
				} else if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.$u.vuex('tipPop', true)
					return;
				}
			},



			getImgUrl(url) {
				return setImgUrl(url);
			},
			getData() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
				mineApiInfo({
					type: this.type
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						// this.rowData = res.data;
						this.$u.vuex('user_info', res.data);
						uni.setStorageSync('lifeData.user_info', res.data);
					}
				})
			}

		},
		onLoad() {
			// if (!this.isAuth) {
			// 	this.$u.vuex('mobilePop', true)
			// }
			this.getMenu()
		},
		onShow() {
			// console.log(this.user_info)
			// if (!this.isAuth) {
			// 	this.$u.vuex('mobilePop', true)
			// }
			this.getData();
		},
		created() {
			// 同步获取系统（手机）信息
			const info = uni.getSystemInfoSync();
			// 动态设置状态栏的高度
			this.statusBarHeight = info.statusBarHeight;
			// 动态设置手机宽度
			this.windowWidth = info.windowWidth;
			// 获取胶囊的位置

			// #ifdef MP
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			// #endif

			// #ifdef H5
			const menuButtonInfo = {
				bottom: 20,
				top: 20
			}
			// #endif


			// console.log(info);
			// 动态设置导航栏的位置
			this.navbarHeight = (menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top - this
				.statusBarHeight);
			this.statusBarAndNavbarHeight = this.navbarHeight + this.statusBarHeight;
		},
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		background: none;
		outline: none;
		padding: 0;
	}

	button:hover {
		background: none;
	}

	.main-top {
		// height: 468rpx;
		background: linear-gradient(to bottom right, #7DE6B4, #68D3A0, #76D6A8, #71CBA0);

		.top {
			// background: linear-gradient(100deg, #00d5ff, #00aaff);
		}

		.box-bg {
			// background: linear-gradient(100deg, #00d5ff, #00aaff);
			padding: 5rpx 10rpx;
			display: flex;
			gap: 10rpx;
			place-items: center;
			justify-content: center;

			image {
				width: 50rpx;
				height: 50rpx;
				background-color: antiquewhite;
				border-radius: 510rpx;
			}
		}

		//用户基本信息
		.lb-user {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 32rpx;
			width: 100%;
			box-sizing: border-box;

			.user-left {}

			.user-right {
				width: calc(100% - 120rpx);
				padding-left: 32rpx;
				display: flex;
				flex-direction: row;


				.no-login {
					text {
						font-size: $main-font-28;
						color: $main-font-color-grey6;
					}
				}

				.user-info {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: 100%;


					.name {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.text {
							font-size: $main-font-32;
							font-weight: bold;
							color: #171717;
						}


						.set {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.tel-id {
						display: flex;
						flex-direction: row;


						.box {
							display: flex;
							flex-direction: row;
							align-items: center;

							&:nth-of-type(3n-1) {
								padding-left: 36rpx;
							}

							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 2rpx;
							}

							text {
								font-size: $main-font-24;
								font-weight: 400;
								color: #171717;
							}
						}
					}
				}
			}
		}

		//vip
		.lb-vip {
			height: 100rpx;
			width: calc(100% - 64rpx);
			margin: 0 auto;
			position: relative;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 42rpx 0 106rpx;
			box-sizing: border-box;

			image {
				position: absolute;
				top: 0;
				left: 0;

				&:nth-of-type(2) {
					width: 72rpx;
					height: 72rpx;
					top: 5rpx;
					left: 32rpx;
				}
			}

			.vip-left {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;

				.vip-label {
					font-size: $main-font-28;
					font-weight: bold;
					color: #7C562D;
					padding-right: 12rpx;
				}

				.vip-time {
					font-size: $main-font-20;
					font-weight: 400;
					color: #7C562D;
				}
			}

			.vip-right {
				position: relative;
				width: 82rpx;
				height: 48rpx;
				background: linear-gradient(124deg, #B07F42 0%, #976737 100%);
				border-radius: 72rpx;
				font-size: $main-font-24;
				font-weight: 400;
				color: $main-font-color-white;
				line-height: 46rpx;
				text-align: center;
			}
		}

	}

	.user-main {
		position: relative;
		width: 100%;
		// height: 286rpx;
		background: linear-gradient(to bottom, #FFFFFF 8%, #F5F5F5 92%);
		box-shadow: 0rpx -2rpx 4rpx rgba(219, 219, 219, 0.16);
		opacity: 1;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin-top: -16rpx;
		padding: 36rpx 32rpx;
		box-sizing: border-box;
	}

	// 标题
	.lb-title {
		font-size: $main-font-32;
		font-weight: bold;
		color: $main-font-color;
		padding: 28px 0 12rpx;
	}



	//公共板块
	.lb-grid-5 {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 30rpx;
		padding: 20rpx 0;

		.grid-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.item-icon {
				width: 56rpx;
				height: 56rpx;
			}

			.item-label {
				display: block;
				white-space: nowrap;
				padding-top: 12rpx;
				font-size: $main-font-24;
				font-weight: 400;
				color: $main-font-color;
			}
		}
	}
</style>